<template>
	<view>
		<view class="tabNav redBg">
			<view class="tabItem"
				:class="[orderStaIndex == index ? 'active' : '']"
				v-for="(item,index) in orderStaArr"
				:key="index"
				@tap="switchStatus(index,item.id)"
			>{{item.name}}<view class="lineView"></view></view>
		</view>
		<view class="blockView" :style="{'margin-top':margTop + 'rpx'}"></view>
	</view>
</template>

<script>
	export default {
		props:{
			orderStaArr:Array,
			colType:{
				type:String,
				default:'orangeBg'
			},
			orderStaIndex:{
				type:Number,
				default:0
			},
			margTop:{
				type:Number,
				default:110
			}
		},
		methods:{
			switchStatus(index,id){
				this.$emit('switchStatus',index,id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.tabNav{
		width: 100%;
		height: 90rpx;
		background: #fff;
		position: fixed;
		left: 0;
		/* #ifdef APP-PLUS || MP-WEIXIN */
			top: 0;
		/* #endif */
		/* #ifdef H5 */
			top: 86rpx;
		/* #endif */
		z-index: 100;
		display: flex;
		box-shadow: 0 5rpx 8rpx rgba(0,0,0,.02);
		justify-content: space-between;
		.tabItem{
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			color:#999;
			text-align: center;
			position: relative;
			.lineView{
				width: 14%;
				height: 10rpx;
				position: absolute;
				left: 43%; 
				bottom: 10rpx;
				display: none;
				border-radius: 20rpx;
			}
			&.active{ 
				font-weight: bold;
				font-size: $font-size32;
				.lineView{
					display: block;
				}
			}
		}
		&.redBg{
			.lineView{
				background:#F12918;
			}
			.tabItem.active{
				color:#F12918 ;
			}
		}
	}
</style>